.page{
	width: 100%;
	height: 100%;
	background-color: #F4F4F4;
	.page-head{
		padding-top: 50rpx;
		display: flex;
		flex-direction: row;
		overflow: hidden;
		margin-bottom: 0rpx;
		.page-head-img{	
			width: 100rpx;
			height: 100rpx;
			margin: 10rpx 40rpx;
			border: 1rpx solid #ffffff;
			border-radius: 50%;			
		}
		.page-head-input{
			display: flex;
			flex-direction: row;		
			margin-top: 40rpx;
			.page-head-Select{
				width: 100%;
				margin-left: -20rpx;
				margin-right: 6rpx;
				font-size: 30rpx;
			}
			.select-img{
				margin-top: -8rpx;
				width: 50rpx;
				height: 50rpx;
				cursor: pointer;
				
			}
		}
	}
}
.page-head-img image{
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}
.page-nav{
	width: 96%;
	margin: 20rpx 2%;
	background-color: #ffffff;
	
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.page-nav-item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		padding: 20rpx 0;
		.nav-icon{
			width: 100rpx;
			height: 100rpx;
			
		}
		
		.nav-msg{
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background-color: red;
			text-align: center;
			line-height: 40rpx;
			color: #F9F9F9;
			position: absolute;
			top: 5rpx;
			right: 5rpx;
			z-index: 20;
		}
	}
}

.swiper-msg-wrap{
	width: 96%;
	margin: 20rpx 2%;
	height: 80rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	.msg-icon{
		width: 60rpx;
		height: 60rpx;
		margin: 0 10rpx;
	}
	.swiper-msg{
		height: 80rpx;
		width: 80%;
		.swiper-msg-item{
			height: 80rpx;
			display: flex;
			align-items: center;
		}
	}
}
.null{
	display: none;
}
.list-head{
	width: 96%;
	margin: 0 auto;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	
}
.list-item{
	//width: 100%;
	display: flex;
	flex-direction: row;
	
}
.line{
	width: 100%;
	border-bottom: 16rpx solid #F4F4F4;
}

.list-title{
	height: 140rpx;
	line-height: 140rpx;
	font-size: 44rpx;
	font-weight: 500;
}			
.list-msg{
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	background-color: red;
	text-align: center;
	line-height: 50rpx;
	color: #F9F9F9;
	margin-top: 20rpx;
	// position: absolute;
	// top: 30rpx;
	// right:28%;
	z-index: 20;
}
// .list-wrap{
// 	width: 96%;
// 	margin: 20rpx 2%;	
// 	border-radius: 10rpx;
// 	.list-head{				
// 		.list-item{
// 			display: flex;
// 			flex-direction: column;
// 			align-items:center;
// 			text-align: center;
// 			margin-top: 10px;
// 			position: relative;
// 			background-color: #ffffff;
// 			.list-title{
// 				height: 140rpx;
// 				line-height: 140rpx;
// 				font-size: 44rpx;
// 				font-weight: 500;
// 			}			
// 			.list-msg{
// 				width: 50rpx;
// 				height: 50rpx;
// 				border-radius: 50%;
// 				background-color: red;
// 				text-align: center;
// 				line-height: 50rpx;
// 				color: #F9F9F9;
// 				// position: absolute;
// 				// top: 30rpx;
// 				// right:28%;
// 				z-index: 20;
// 			}
// 			.null{
// 				display: none;
// 			}
// 			.list-msg1{
// 				right:112px;
			
// 			}
			
// 		}
		
// 		// .list-more{
// 		// 	color: #8E8F92;
// 		// 	font-size: 24rpx;
// 		// 	.iconfont{
// 		// 		font-size: 24rpx;
// 		// 	}
// 		// }
// 	}
	
// 	// .list-item{
// 	// 	padding: 10rpx;
// 	// 	border-bottom: 1px solid #f4f4f4;
// 	// 	.item-info{
// 	// 		display: flex;
// 	// 		align-items: center;
// 	// 		justify-content: space-between;
// 	// 		margin-top: 20rpx;
// 	// 		view{
// 	// 			font-size: 36rpx;
// 	// 		}
// 	// 		text{
// 	// 			color: #8E8F92;
// 	// 		}
// 	// 	}
// 	// 	.item-info1{
// 	// 		display: flex;
// 	// 		align-items: center;
// 	// 		justify-content: space-between;
// 	// 		margin: 20rpx 0;
// 	// 		color: #8E8F92;
// 	// 		text{
// 	// 			margin-left: 10rpx;
// 	// 		}
// 	// 	}
// 	// 	.item-price{
// 	// 		color: #FF7729;
// 	// 		font-size: 32rpx;
// 	// 	}
// 	// 	.user-wrap{
// 	// 		margin-top: 20rpx;
// 	// 		display: flex;
// 	// 		align-items: center;
// 	// 		justify-content: space-between;
// 	// 		.user-box{
// 	// 			display: flex;
// 	// 			align-items: center;
// 	// 			justify-content: flex-start;
// 	// 			.user-avatar{
// 	// 				width: 80rpx;
// 	// 				height: 80rpx;
// 	// 				margin: 10rpx;
					
// 	// 			}
// 	// 			.user-info{
// 	// 				.user-name{
// 	// 					font-size: 28rpx;
// 	// 					display: flex;
// 	// 					align-items: center;
// 	// 					justify-content: flex-start;
// 	// 					image{
// 	// 						width: 56rpx;
// 	// 						height: 34rpx;
// 	// 					}
// 	// 				}
// 	// 				text{
// 	// 					color: #8E8F92;
// 	// 				}
// 	// 			}
// 	// 		}
			
// 	// 		.item-btn{
// 	// 			padding:10rpx 20rpx;
// 	// 			background-color: $dominant-color;
// 	// 			color: #ffffff;
// 	// 			border-radius: 10rpx;
// 	// 		}
// 	// 	}
// 	// }	
// }
.service{
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 140rpx;
	right: 20rpx;
}
.service-icon image{
	width: 90rpx;
	height: 90rpx;
	display: block;
	margin: 14rpx auto;
}
.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.6);
		z-index: 998;
	}

	.bottom-dialog-wrap{
		position: fixed;
		width: 94%;
		margin-left: 3%;
		z-index: 999;
		bottom: 20rpx;
		.info-wrap{
			background-color: #ffffff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			.info-item{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
				font-size: 36rpx;
				color: $dominant-color;
				image{
					width: 60rpx;
					height: 60rpx;
					margin: 20rpx;
				}
			}
			
		}
		.dialog-btn{
			background-color: #ffffff;
			border-radius: 8rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
		}
	}